<template>
  <div class="withdraw-passwd-container">
    <m-header title="提现密码"></m-header>
    <div class="input-wrapper">
        <div class="label">手机号码：</div>
        <div class="comp">
            <input v-model="mobile" type="text" maxlength="11" placeholder="请输入当前绑定的手机号"/>
        </div>
    </div>
    <div class="input-wrapper">
        <div class="label">验证码：</div>
        <div class="comp codes">
            <input v-model="code" type="text" placeholder="请输入验证码"/>
            <div class="right-btn" v-if="!showCode" @click="getCode">获取验证码</div>
            <div class="right-btn" v-else>{{`${second}s`}}</div>
        </div>
    </div>
    <div class="button-wrapper">
        <div class="btn" @click="handleSubmit">确定</div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';

export default {
  name: 'Register',
  components: {
  },
  data () {
    return {
      showCode: false,
      second: 60,
      mobile: '',
      code: ''
    };
  },
  methods: {
    ...mapActions({
      sendSms: 'common/sendSms',
      checkResetPswCode: 'mine/checkResetPswCode'
    }),
    handleSubmit () {
      if (!this.mobile) {
        this.$vux.toast.text('请输入手机号');
        return false;
      } else if (!/^1[3|4|5|6|7|8|9]\d{9}/ig.test(this.mobile)) {
        this.$vux.toast.text('手机号格式不正确');
        return false;
      }
      if (!this.code) {
        this.$vux.toast.text('请输入验证码');
        return false;
      }
      const params = {
        telephone: this.mobile,
        code: this.code
      }
      this.checkResetPswCode(params).then(res => {
        if (res) {
          this.$router.push({ path: '/setting/reWithdrawPwd' });
        }
      })
    },
    getCode () {
      if (!this.mobile) {
        this.$vux.toast.text('请输入手机号');
        return false;
      } else if (!/^1[3|4|5|6|7|8|9]\d{9}/ig.test(this.mobile)) {
        this.$vux.toast.text('手机号格式不正确');
        return false;
      }
      if (!this.showCode) {
        this.showCode = true;
        this.second = 60;
        this.countdown();
        this.sendSms({mobile: this.mobile});
      }
    },
    countdown () {
      let interval = setInterval(() => {
        if ((this.second--) <= 1) {
          this.second = 1;
          this.showCode = false;
          clearInterval(interval);
        }
      }, 1000);
    }
  }
};
</script>

<style lang="less">
  .withdraw-passwd-container {
    padding-top: 0.92rem;
    padding-bottom: 0.2rem;
    background: #f7f7f7;

    .input-wrapper {
        .label {
            font-size: 0.28rem;
            color: #666666;
            padding: 0.3rem 0 0.2rem 0.2rem;
        }
        .comp {
            height: 0.8rem;
            background: #ffffff;
            position: relative;
            input {
              width: 100%;
              padding: 0.1rem 0.3rem;
              height: 0.8rem;
              line-height: 0.8rem;
              box-sizing: border-box;
              &::-webkit-input-placeholder{
                // font-size: 0.28rem;
                color: #999999;
              }
            }
            &.codes {
              input {
                padding-right: 2.63rem;
              }
            }
            .right-btn {
                position: absolute;
                text-align: center;
                width: 2.63rem;
                height: 0.8rem;
                line-height: 0.8rem;
                top: 0;
                right: 0;
                color: #ffffff;
                background: #D44743;
                font-size: 0.24rem;
            }
        }
    }
    .button-wrapper {
        margin-top: 0.6rem;
        padding: 0 0.2rem;
        .btn {
            text-align: center;
            height: 0.88rem;
            line-height: 0.88rem;
            font-size: 0.34rem;
            color: #ffffff;
            background: #D44743;
            cursor: pointer;
            border-radius: 0.1rem;
        }
    }
  }
</style>
